<div class="image-content1" style="height:500px;text-align: center;width:548px;border:1px solid #EFEFEF">
<table width="100%" height="100%"><tr><td valign="middle" align="center">
<?php 
if(count($images)>1){
$j=0;
 foreach ($images as $image){?>
	<a <?php if ($j>0){?>style="display:none"<?php }?> href="<?php echo Configure::read('base_url');?>products/details/<?php echo $pid?>">
	<?php 
		echo $html->image('mediumimg/'.$thumbnail->render($image['ProductImage']['image'],
				array(
					'width'=>500,
					'height'=>500,
					'quality'=>80,
					'path'=>'mediumimg'
				)
			)
		);
	?>
	</a>
<?php	 $j++;
	}
  }else{ ?>
  <a href="<?php echo Configure::read('base_url');?>products/details/<?php echo $pid?>">
	<?php 
		echo $html->image('mediumimg/'.$thumbnail->render($thumb['Product']['products_thumbnailImage'],
				array(
					'width'=>500,
					'height'=>500,
					'quality'=>80,
					'path'=>'mediumimg'
				)
			)
		);
		
	?>
  </a>
  <?php }?>
  </td></tr></table>
</div>
<?php if(count($images)>1){?>
 <div class="image-thumb1">
		<?php foreach ($images as $image):?>
		<a href="javascript:void(0);">
		<?php 
		echo $html->image('popupthumbs/'.$thumbnail->render($image['ProductImage']['image'],
				array(
					'width'=>32,
					'height'=>32,
					'quality'=>80,
					'path'=>'popupthumbs'
				)
			)
		);
		?></a>
		<?php endforeach;?>
</div>
<?php } ?>

<style type="text/css">
.image-content1 img{cursor: pointer;}
a:link{text-decoration:none;}
.image-thumb1{float:left;}
.image-thumb1 a{float:left;margin:3px;padding:3px;border:1px solid #efefef}
</style>
<?php  echo $html->script(array("jquery.min.js"));?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.image-thumb1 a').click(function(){
		var track=jQuery('.image-thumb1 a').index(this);		
		jQuery('.image-content1 a').fadeOut("200").hide();
		jQuery(".image-content1 a:eq("+track+")").fadeIn("250").show();
		return false;
    });	
	jQuery("div.popupWrapper1").mouseenter(function(){}).mouseleave(function(){
     disablePopup1();
	 //setTimeout('disablePopup1()',100);
    });
});	
</script>